<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<title>Omi - Front End Cross-Frameworks Framework</title>
	<link rel="shortcut icon" href="https://tencent.github.io/omi/packages/omiu/examples/build/favicon.ico">
	<style>
		html,
		body {
			padding: 0;
			margin: 0;
			overflow-x: hidden;
		}

		canvas {
			padding: 0;
			margin: 0;
			border: 0;
		}

		#container {
			text-align: center;
		}
	</style>

	<style>
		body {
			background-color: #302f33;
			/*opacity: 0;*/
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			text-transform: uppercase;
			font-size: 12px;
			letter-spacing: 2px;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}

		/*body.ready { opacity: 1; }*/


		.icon-text path,
		.icon-text polygon {
			/*opacity: 0;*/
		}

		.info {
			text-align: center;
		}

		.description {
			/*opacity: 0;*/
			color: white;
			margin-top: 20px;
		}

		.links {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
		}

		@media (min-width: 700px) {
			.links {
				-webkit-box-orient: horizontal;
				-webkit-box-direction: normal;
				-ms-flex-direction: row;
				flex-direction: row;

			}
		}

		.button {
			/*opacity: 0;*/
			position: relative;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			width: 180px;
			height: 60px;
			text-decoration: none;
		}

		.button.blue {
			color: #5E89FB;
		}

		.button.green {
			color: #07C160;
		}

		.button.red {
			color: #F95050;
		}

		.button svg {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			stroke-width: 1;
			fill: none;
			fill-rule: evenodd;
			stroke: currentColor;
		}

		.button.green svg {
			-webkit-transform: rotate(180deg);
			transform: rotate(180deg);
		}

		.button path {
			scale: .9;
			transform-origin: 50% 50%;
		}

		.credits {
			/*opacity: 0;*/
			margin-top: 20px;
			color: #979797;
		}

		.credits a {
			position: relative;
			color: currentColor;
			text-decoration: none;
		}

		.credits a:after {
			content: "";
			/*opacity: 0;*/
			display: block;
			position: absolute;
			left: 0;
			bottom: -3px;
			width: 100%;
			border-bottom: 1px solid currentColor;
			transition: opacity .75s ease;
		}

		/*.credits a:hover:after {
          opacity: 1;
          transition: opacity .25s ease;
        }*/

		.credits a,
		.credits span {
			transition: color .75s ease;
		}

		.credits a:hover,
		.highlighted {
			color: white;
			transition: color .25s ease;
		}

		#container {
			margin-top: 100px;
		}

		#container img{
				width: 150px;
			}

		@media only screen and (max-width: 500px) {
			#container canvas {
				width: 100%;
			}

			#container img{
				width: 80px;
			}

			#container {
				margin-top: 25px;
			}

		}

		#wp {
			z-index: 10;
		}
	</style>
</head>

<body>
	<div id="wp">
		<div id="container">
			<img
				src="https://tencent.github.io/omi/assets/omi-logo2019.svg">
		</div>
		<div class="info">
			<p class="description">
				Front End Cross-Frameworks Framework
			</p>
			<div class="links">
				<a class="button" style='color: #79e670;' href="https://tencent.github.io/omi/site/docs/index.html" target="_blank">
					<svg viewBox="0 0 180 60">
						<path
							d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z">
						</path>
					</svg>
					<span>Omi Docs</span>
				</a>
				<a class="button" style='color: #79e670;' href="https://github.com/Tencent/omi/tree/master/packages/omix" target="_blank">
					<svg viewBox="0 0 180 60">
						<path
							d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z">
						</path>
					</svg>
					<span>Omix + 小程序</span>
				</a>
				<a class="button" style='color: #79e670' href="https://tencent.github.io/omi/packages/omim/docs/build/index.html"  target="_blank">
					<svg viewBox="0 0 180 60">
						<path
							d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z">
						</path>
					</svg>
					<span>Omim Docs</span>
				</a>
				<a class="button" style='color: #79e670;' href="https://github.com/Tencent/omi/tree/master/packages/omi-kbone"
					target="_blank">
					<svg viewBox="0 0 180 60">
						<path
							d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z">
						</path>
					</svg>
					<span>Omi + Kbone</span>
				</a>
			</div>
			<div class="links">
					<a class="button "  style='color: #42b983;' href="https://github.com/Tencent/omi/tree/master/packages/omiv"  target="_blank">
						<svg viewBox="0 0 180 60">
							<path
								d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z">
							</path>
						</svg>
						<span>Omiv + Vue</span>
					</a>

					<a class="button" style='color: #c984f7;'  href="https://github.com/Tencent/omi/tree/master/packages/preact-css" target="_blank">
						<svg viewBox="0 0 180 60">
							<path
								d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z">
							</path>
						</svg>
						<span>Omi + Preact</span>
					</a>
				<a class="button" style='color: #61dafb;'  href="https://github.com/Tencent/omi/tree/master/packages/omis" target="_blank">
					<svg viewBox="0 0 180 60">
						<path
							d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z">
						</path>
					</svg>
					<span>Omis + React</span>
				</a>


				<a class="button" style='color:white;' href="https://github.com/Tencent/omi" target="_blank">
					<svg viewBox="0 0 180 60">
						<path
							d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z">
						</path>
					</svg>
					<span>GitHub</span>
				</a>
			</div>
			<p class="credits">
				Copyright<span class="version"></span> © <span class="date">2019</span> Tencent
			</p>
		</div>
	</div>
	<pre style="position:absolute;left:40px;top:40px;transform:rotateZ(5deg);pointer-events: none;text-transform:none;">
      <code>
import { define, render } from 'omi'

class Store {
  data = {
    count: 1
  }
  sub = () => {
    this.data.count--
  }
  add = () => {
    this.data.count++
  }
}

define('my-counter', _ =>
  &lt;&gt;
    &lt;button onClick={_.store.sub}&gt;-&lt;/button&gt;
    &lt;span&gt;{_.store.data.count}&lt;/span&gt;
    &lt;button onClick={_.store.add}&gt;+&lt;/button&gt;
  &lt;/&gt;, {
    use: ['count']
  }
))

render(&lt;my-counter /&gt;, 'body', new Store)
       </code>
  </pre>


	<script>

		function detectMobile() {
			if (window.innerWidth <= 800 && window.innerHeight <= 900) {
				return true;
			} else {
				return false;
			}
		}

		if(detectMobile()){
			//document.getElementById('wp').style.marginTop = (window.innerHeight - 800) / 2 + 'px'

		}else{
			document.getElementById('wp').style.marginTop = (window.innerHeight - 700) / 2 + 'px'

		}



	</script>
</body>

</html>
